<template>
    <el-dialog
            :title="title"
            :close-on-click-modal="false"
            :visible.sync="showMenuModal"
            @close="cancel"
            width="500px"
    >
        <el-form
                ref="formDataRefs"
                :model="dialogForm"
                :rules="dialogFormRule"
                label-width="100px"
                v-loading="loading"
                :element-loading-text="loadingText"
        >
            <el-form-item label="菜单名称:" prop="menuName">
                <el-input v-model="dialogForm.menuName" placeholder="请输入菜单名称!" size="small"></el-input>
            </el-form-item>
            <el-form-item label="菜单类型:" prop="type">
                <el-radio-group v-model="dialogForm.type">
                    <el-radio :label="0">目录</el-radio>
                    <el-radio :label="1">菜单</el-radio>
                    <el-radio :label="2">按钮</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item
                    label="菜单地址:"
                    prop="menuUrl"
                    :rules="[{required: dialogForm.type == '0' ? true : false, message:'请填写菜单地址'}]"
            >
                <el-input v-model="dialogForm.menuUrl" placeholder="请输入菜单路由地址!" size="small"></el-input>
            </el-form-item>
            <el-form-item
                    label="菜单图标:"
                    prop="icon"
                    :rules="[{required:dialogForm.type == 0 ? true : false,message:'请填写图标icon'}]"
            >
                <el-input v-model="dialogForm.icon" placeholder="请输入菜单图标!" size="small"></el-input>
            </el-form-item>
            <el-form-item label="上级菜单:" prop="parentId">
                <el-cascader
                        v-model="dialogForm.parentId"
                        placeholder="请选择上级菜单!"
                        size="small"
                        :show-all-levels="false"
                        :options="tableData"
                        :props="props"
                        clearable
                ></el-cascader>
            </el-form-item>
            <el-form-item label="排序:" prop="orderNum">
                <el-input v-model.number="dialogForm.orderNum" placeholder="请输入菜单排序!" size="small"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="footer_dialog">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button size="small" @click="saveMenus" type="primary" :loading="loading">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import vueState from '@lib/vuexState'

    export default {
        props: {
            data: {
                type: Object,
                default: () => {
                },
            },
            types: {
                type: String,
                default: 'add',
            },
        },
        mixins: [vueState],
        data() {
            return {
                showMenuModal: false,
                title: '新增菜单',
                urlBase: '/save',
                loading: false,
                loadingText: '保存中...',
                tableData: [],
                dialogForm: {
                    menuId: '',
                    menuName: '',
                    type: '',
                    menuUrl: '',
                    parentId: '',
                    orderNum: '',
                    icon: '',
                },
                dialogFormRule: {
                    menuName: [{required: true, message: '菜单名称必填！'}],
                    type: [{required: true, message: '菜单类型必填！'}],
                    orderNum: [
                        {required: true, message: '排序必填！'},
                        {type: 'number', trigger: 'blur'},
                    ]
                },
                props: {
                    checkStrictly: true,
                    value: 'menuId',
                    label: 'menuName',
                    children: 'list',
                },
                expireTimeOption: {
                    disabledDate(date) {
                        return date.getTime() <= Date.now()
                    },
                },
            }
        },
        watch: {
            showMenuModal: {
                handler(val) {
                    if (val) this.getRowView()
                },
                immediate: true
            }
        },
        created() {
            this.getAllMenus()
        },
        methods: {
            saveMenus() {
                this.$refs.formDataRefs.validate(async (valid) => {
                    if (valid) {
                        let data = JSON.parse(JSON.stringify(this.dialogForm))
                        if (data.parentId == '') {
                            data.parentId = 0
                        } else if (Array.isArray(data.parentId)) {
                            if (data.parentId.length <= 0) {
                                data.parentId = 0
                            } else {
                                data.parentId = data.parentId[data.parentId.length - 1]
                            }
                        }
                        this.loading = true
                        this.loadingText = '保存菜单中...'
                        let res = (await this.$http.post('/cms/auth/menu' + this.urlBase, data))
                        this.loading = false
                        if (res && res.code == '0') {
                            this.$store.dispatch('updateMenuList').then(() => {
                                this.$message.success('保存菜单成功')
                                this.$emit('success', true)
                                this.cancel()
                            })
                        }
                    }
                })
            },
            async getAllMenus() {
                let res = (await this.$http.post('/cms/auth/menu/list'))
                if (res && res.code == '0') {
                    this.tableData = res.data.list
                }
            },
            async getRowView() {
                if (this.data) {
                    if (this.types == 'next') {
                        this.urlBase = '/save'
                        this.title = '新增下级菜单'
                    } else {
                        this.urlBase = '/update'
                        this.title = '修改菜单'
                    }
                    this.loading = true
                    this.loadingText = '查询菜单信息菜单中...'
                    let res = (await this.$http.post('/cms/auth/menu/info', this.data.menuId))
                    this.loading = false
                    if (res && res.code == 0) {
                        let datas = res.data
                        if (this.types == 'next') {
                            this.dialogForm = Object.assign(this.dialogForm, {
                                menuId: '',
                                menuName: '',
                                type: '',
                                menuUrl: '',
                                parentId: datas.menuId,
                                orderNum: '',
                                icon: '',
                            })
                        } else {
                            this.dialogForm = Object.assign(this.dialogForm, {
                                menuId: datas.menuId,
                                menuName: datas.menuName,
                                type: datas.type,
                                menuUrl: datas.menuUrl,
                                parentId: datas.parentId,
                                orderNum: datas.orderNum,
                                icon: datas.icon,
                            })
                        }
                    }
                } else {
                    this.title = '新增菜单'
                    this.urlBase = '/save'
                    this.dialogForm = Object.assign(this.dialogForm, {
                        menuId: '',
                        menuName: '',
                        type: '',
                        menuUrl: '',
                        parentId: '',
                        orderNum: '',
                        icon: '',
                    })
                }
            },
            cancel() {
                this.showMenuModal = false
                this.loading = false
            }
        }
    }
</script>
